<template>
    <div class="aside-header" ref="asTop">
        <div class="search">
            <input type="text" placeholder="输入关键字搜索">
            <i class="iconfont">&#xe628;</i>
        </div>
        <div class="category">
            <ul class="category-list" @mouseleave="handleMove"> 
                <li 
                    v-for="(cate,index) in cateList" 
                    :key="index" 
                    @mouseenter="hangdleEnter"
                    @click="getInner"
                >
                    <span :style="changeColor"></span>
                    {{cate}}
                </li>
            </ul>
            <div class="cover" :style="{top:currentTop+'px'}"></div>
        </div>
    </div>
</template>

<script>
let cateList=["全部文章","个人日记","CSS&HTML5","javaScript","MVVM","Node","Vue","其他"]
let colorList=["#2ea7e0","#6bc30d"]
export default {
    props:["fTop"],
    data(){
        return {
            currentTop:0,
            cateList,
            colorList,
            changeCurrent:0
        }
    },
    mounted(){
        window.addEventListener("scroll",this.change)
    },
    destroyed(){
        window.removeEventListener("scroll",this.change)
    },
    computed:{
        changeColor(){
            return `background:${this.colorList[Math.floor(Math.random())*2]}`
        }
    },
    methods: {
        change(){
            let aTop=document.documentElement.scrollTop
            if(aTop>=this.fTop){
                let timer=setInterval(()=>{
                    if(this.changeCurrent<=this.fTop){
                        this.$refs.asTop.style.marginTop=`${this.changeCurrent+=20}px`
                    }else{
                        clearInterval(timer)
                    }
                },20)
            }else{
                 this.$refs.asTop.style.marginTop=`0`
            }
        },
        hangdleEnter(e){
            let oHeight=e.target
            this.currentTop=oHeight.offsetTop
        },
        handleMove(){
            this.currentTop=0
        },
        getInner(e){
            let inner=e.target.innerText
            this.$axios.post("/atcsearch",inner)
                .then(res=>{
                    this.$store.commit("getInner",res.data)
                })
            setTimeout(()=>{
                window.location.reload()
            },10)
        }
    },
}
</script>

<style lang="less" scoped>
.aside-header{
    width:100%;
    height:428px;
    background:white;
    .search{
        position: relative;
        height:80px;
        background:grey;
        line-height: 80px;
        text-align: center;
        i{
            position:absolute;
            right:40px;
            color:grey;
            font-size:18px;
        }
        input{
            box-sizing: border-box;
            width:80%;
            height: 40px;
            border-radius: 20px;
            padding-left:20px;
            border:none;
            outline: none;
            font-size:13px;
        }
    }
    .category{
        position:relative;
        width:100%;
        background:white;
        .category-list{
            box-sizing: border-box;
            padding-right:35px;
            padding-left:30px;
            padding-bottom:20px;
            li{
                position: relative;
                z-index: 1;
                box-sizing: border-box;
                padding-left:30px;
                line-height: 40px;
                border-bottom:1px solid  #f8f9f7;
                font-size:13px;
                z-index: 200;
                cursor: pointer;
                span{
                    display:inline-block;
                    width:5px;
                    height:5px;
                    margin-right:30px;
                    text-align: center;
                    line-height: 20px;
                }
            }
        }
        .cover{
            position:absolute;
            background:rgb(248,249,247);
            width:98.5%;
            height:40px;
            top:0;
            left:0;
            transition:.2s;
            border-right:5px solid rgb(73,72,71);
        }
    }
}
</style>